import React, { Component } from 'react'
import { Link, HashRouter as Router, withRouter } from 'react-router-dom'

import menuConfig from '@/config/menu'
import styles from './index.module.styl'

import { Menu } from 'antd'
import * as allIcon from '@ant-design/icons'

const SubMenu = Menu.SubMenu
const MenuItem = Menu.Item

class SideMenu extends Component {

    state = {
        openKeys: [],
        selectedKeys: []
    }

    componentWillMount() {
        this.setDefaultKeys(this.props.location.pathname)
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.location.pathname !== this.props.location.pathname) {
            this.setDefaultKeys(nextProps.location.pathname)
        }
    }

    //菜单渲染方法
    generateMenus = (menus) => menus.map(
        menu => {
            if (!menu) return null
            //ant@v4
            const Icon = menu.icon ? allIcon[menu.icon] : () => null
            if (menu.sub) {
                return (
                    <SubMenu
                        key={menu.path}
                        title={<span><Icon /><span>{menu.name}</span></span>}
                    >
                        {this.generateMenus(menu.sub, menu.path)}
                    </SubMenu>
                )
            } else {
                return (
                    <MenuItem key={menu.path}>
                        <Link to={menu.path}>
                            <Icon />
                            <span>{menu.name}</span>
                        </Link>
                    </MenuItem>
                )
            }
        }
    )

    //展开/关闭的回调
    openChange = (keyList) => {
        this.setState({
            openKeys: keyList
        })
    }

    //子集选中事件
    handleMenuSelect = (e) => {
        this.setState({
            selectedKeys: e.selectedKeys,
        })
        if (this.props.location.pathname === e.key) return
        //...
        this.props.history.push(e.key)
    }

    //设置默认打开
    setDefaultKeys = (pathname) => {
        const pathArr = pathname.match(/(\/\w+)/g)

        if (!pathArr) return

        // 选中左边栏菜单
        let openKeys = []
        for (var i = 0; i < pathArr.length; i++) {
            if (i === 0) {
                // 过滤掉 main
            } else {
                let array = []
                for (var k = 0; k < i; k++) {
                    array += pathArr[k]
                }
                openKeys.push(array + pathArr[i])
            }
        }

        this.setState({
            openKeys,
            selectedKeys: [pathname]
        })
    }

    render() {

        const {
            openKeys,
            selectedKeys
        } = this.state

        return (<Router>
            <Menu
                mode="inline"
                className={styles.menu}
                selectedKeys={selectedKeys}
                openKeys={openKeys}
                onOpenChange={this.openChange}
                onSelect={this.handleMenuSelect}
            >
                {this.generateMenus(menuConfig)}
            </Menu>
        </Router>);
    }
}

export default withRouter(SideMenu)